<template>
  <el-drawer :title="title(edit)" size="45%" :append-to-body="true" :before-close="handleClose" :visible.sync="visible"
    :wrapperClosable="false" ref="drawer">
    <div class="d-flex flex-column full-height" v-loading="loading">
      <div class="flex-grow-1 pa-3 overflow-auto">
        <el-form autocomplete="on" :model="devideForm" element-loading-text="给我一点时间" :rules="rules" label-position="right"
          label-width="100px" ref="devideFormRef">
          <el-form-item label="设备名称：" prop="name">
            <el-input v-model="devideForm.name" placeholder="请输入" maxlength="50"></el-input>
          </el-form-item>
          <el-form-item label="设备型号：" prop="spec">
            <el-input v-model="devideForm.spec" placeholder="请输入" maxlength="50"></el-input>
          </el-form-item>
          <el-form-item label="采集终端号：" prop="boxNo">
            <el-input v-model="devideForm.boxNo" placeholder="请输入" maxlength="50"></el-input>
          </el-form-item>
          <el-form-item label="定位器号：" prop="imei">
            <el-input v-model="devideForm.imei" placeholder="请输入" maxlength="50"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="drawer__footer text-right">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="onConfirm">确认</el-button>
      </div>
    </div>
  </el-drawer>
</template>
<script>
  import {
    addDevice,
    editDevice,
  } from '@/api/customer'
  import { deepCopy } from '@/utils'
  export default {
    props: {
      visible: {
        type: Boolean,
        required: true
      },
      devideObj: Object,
      edit: {
        type: String,
        required: true
      },
      type: String
    },
    computed: {
      title() {
        return (str) => {
          if (str === 'add') return '新增设备'
          else if (str === 'edit') return '编辑设备'
        }
      }
    },
    data() {
      return {
        loading: false,
        devideForm: {
          name: '',
          spec: '',
          boxNo: '',
          imei: ''
        },
        // 表单验证
        rules: {
          name: [{
            required: true,
            trigger: 'blur',
            message: '请输入设备名称'
          }]
        }
      }
    },
    watch: {
      visible(value) {
        if (value) {
          if (this.edit === 'edit') this.devideForm = deepCopy(this.devideObj)
          if (this.edit === 'add' && this.type === 'operate') this.devideForm.customerId = this.devideObj.customerId
        }
      }
    },
    methods: {
      onConfirm() {
        this.$refs['devideFormRef'].validate((valid) => {
          if (valid) {
            if (!this.type) {
              this.$emit('devideCallBack', deepCopy(this.devideForm))
              this.handleClose()
            } else if (this.type === 'operate') {
              this.submit()
            }
          }
        })
      },
      submit() {
        const json = deepCopy(this.devideForm)
        this.loading = true
        let fun
        if (this.edit === 'add') fun = addDevice
        else if (this.edit === 'edit') fun = editDevice
        fun(json).then(() => {
          this.$message.success('操作成功')
          this.handleClose()
          this.$emit('getList')
        }).finally(() => {
          this.loading = false
        })
      },
      handleClose() {
        this.$refs['devideFormRef'].resetFields()
        this.devideForm = {
          name: '',
          spec: '',
          boxNo: '',
          imei: ''
        }
        this.$emit('update:visible', false)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .el-input {
    width: 60%;
  }

  .head {
    height: 40px;
    line-height: 40px;
    padding-right: 12px;
    width: 100px;
    color: #606266;
    font-size: 14px;
  }
</style>